<template>
  <div class="home">
    <el-tabs type="border-card">
      <el-tab-pane>
        <span slot="label">
          未读消息 <span>{{ $store.getters.num.num1 }}</span></span
        >
        <ul class="con">
          <li v-for="item in list" :key="item.id" v-show="item.status == 0">
            <div>
              <span>{{ item.id }}</span> <span>{{ item.title }}</span>
            </div>

            <el-button type="primary" @click="item.status = 1"
              >变为已读</el-button
            >
          </li>
        </ul>
        <el-button @click="change(0, 1)">全部已读</el-button>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          已读消息<span>{{ $store.getters.num.num2 }}</span></span
        >
        <ul class="con">
          <li v-for="item in list" :key="item.id" v-show="item.status == 1">
            <div>
              <span>{{ item.id }}</span> <span>{{ item.title }}</span>
            </div>
            <div>
              <el-button type="primary" @click="item.status = 0"
                >变为未读</el-button
              ><el-button type="primary" @click="item.status = 2"
                >删除</el-button
              >
            </div>
          </li>
        </ul>
        <el-button type="primary" @click="change(1, 2)">全部删除</el-button>
      </el-tab-pane>
      <el-tab-pane>
        <span slot="label">
          回收站 <span>{{ $store.getters.num.num3 }}</span></span
        >
        <ul class="con">
          <li v-for="item in list" :key="item.id" v-show="item.status == 2">
            <div>
              <span>{{ item.id }}</span> <span>{{ item.title }}</span>
            </div>

            <el-button type="primary" @click="item.status = 1">还原</el-button>
          </li>
        </ul>
        <el-button type="primary" @click="change(2, 0)">全部还原</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    this.$axios.get("data.json").then((res) => {
      console.log(res);
      this.$store.commit("setData", res.data.data);
    });
  },
  computed: {
    list() {
      return this.$store.state.list;
    },
    //拿到vuex里的数据
  },
  methods: {
    change(a, b) {
      this.$store.commit("change", { a, b });
    },
  },
};
</script>
<style lang="scss">
.con {
  li {
    display: flex;
    justify-content: space-between;
    height: 60px;
    align-items: center;
  }
}
</style>
